<!DOCTYPE html>
<svg>
  <marker id="a" markerWidth="2" markerHeight="2" refX="1" refY="1">
    <rect width="2" height="2" fill="red"/>
  </marker>
  <marker id="b" markerWidth="2" markerHeight="2" refX="1" refY="1">
    <rect width="2" height="2" fill="green"/>
  </marker>
  <line stroke-width="50" stroke="red" y1="50" x2="50" y2="50">
    <animate attributeName="marker-end" fill="freeze" dur="10s" values="url(#a);url(#b)"/>
  </line>
</svg>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();
// Advance the timeline to just before the value transition, then wait
// for two frames (first red, second green.)
// NOTE: Because of "legacy" in the animation engine, we first wait for 25ms,
// since no updates will be performed prior to that. Without this the two rAF
// calls ought to be enough.
document.querySelector('svg').setCurrentTime(5 - 0.001);
onload = function() {
  setTimeout(function() {
    setTimeout(function() {
      requestAnimationFrame(function() {
        requestAnimationFrame(function() {
          testRunner.notifyDone();
        });
      });
    }, 25);
  });
};
</script>
